{% extends "base.html" %}

{% block content %}
<div class="container mt-4">
    <h2>消费统计图表</h2>

    <!-- 时间筛选表单 -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="GET" action="{{ url_for('view_charts') }}" class="row g-3 align-items-end">
                <div class="col-md-4">
                    <label for="year" class="form-label">年份</label>
                    <select class="form-select" id="year" name="year">
                        {% for year in range(datetime.now().year, datetime.now().year-5, -1) %}
                        <option value="{{ year }}" {% if year == selected_year %}selected{% endif %}>{{ year }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-4">
                    <label for="month" class="form-label">月份</label>
                    <select class="form-select" id="month" name="month">
                        <option value="0" {% if selected_month == 0 %}selected{% endif %}>全年</option>
                        {% for month in range(1, 13) %}
                        <option value="{{ month }}" {% if month == selected_month %}selected{% endif %}>{{ month }}月</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-4">
                    <button type="submit" class="btn btn-primary">筛选</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 显示总支出 -->
    <div class="alert alert-info" role="alert">
        {% if selected_month != 0 %}
            {{ selected_year }}年{{ selected_month }}月总支出：¥{{ "%.2f"|format(total_spent) }}
        {% else %}
            {{ selected_year }}年总支出：¥{{ "%.2f"|format(total_spent) }}
        {% endif %}
    </div>

    <!-- 图表容器 -->
    <div class="row">
        <!-- 饼图 -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <canvas id="pieChart"></canvas>
                </div>
            </div>
        </div>
        <!-- 柱状图 -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <canvas id="barChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // 准备数据
    const categories = {{ categories|tojson }};
    const amounts = {{ amounts|tojson }};
    
    // 生成随机颜色
    function generateColors(count) {
        const colors = [];
        for (let i = 0; i < count; i++) {
            colors.push(`hsl(${(i * 360 / count) % 360}, 70%, 60%)`);
        }
        return colors;
    }
    
    const backgroundColors = generateColors(categories.length);

    // 饼图
    const pieCtx = document.getElementById('pieChart').getContext('2d');
    new Chart(pieCtx, {
        type: 'pie',
        data: {
            labels: categories,
            datasets: [{
                data: amounts,
                backgroundColor: backgroundColors
            }]
        },
        options: {
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: '支出分类占比'
                }
            }
        }
    });

    // 柱状图
    const barCtx = document.getElementById('barChart').getContext('2d');
    new Chart(barCtx, {
        type: 'bar',
        data: {
            labels: categories,
            datasets: [{
                label: '支出金额',
                data: amounts,
                backgroundColor: backgroundColors
            }]
        },
        options: {
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: '支出分类金额'
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>
{% endblock %}
